<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    div{
        margin: 20px;
        width: 300px;
        text-align: center;
    }

    div#div1{
        border: 1px solid black;
        background-color: aqua;
        /*transform: rotate(30deg); //旋转角度，这个属性有多种浏览器的兼容*/
    }

    div#btn_conner{
        border: 1px solid black;
        border-radius: 30px;
        font-size: 20px;
        text-align: center;
    }

    div#btn_box_shodown{
        width: 300px;
        height:100px;
        background-color: burlywood;
        box-shadow: 10px 10px 50px black;  /*添加阴影：1、右边长度 2、下边长度 3、阴影的稀释度*/
    }

    div#image_pass{
        background:url("../resource/bg_flower.gif");
        background-repeat: no-repeat;
        background-color: cadetblue;
        background-size: 80px 80px; /*控制背景图片大小,可以使用百分比，也可用具体像素值*/
        width: 200px;
        height: 200px;
        background-origin: content-box;
        transition: height 1s,width 2s ,transform 2s;
    }

    /*当鼠标经过时长度变化了*/
    div#image_pass:active{
        height: 50px;
        width: 50px;
        transform: rotate(180deg);
    }

    p{
        padding: 10px;
        word-wrap: break-word; /*对于文本标签可用的*/
        background-color: cadetblue;
        width: 100px;
    }

    h4#test_break{
        word-wrap: break-word;
        background-color: cadetblue;
        width: 190px;
        padding:10px;
    }

</style>
<body>

<div id="div1">hello</div>
<div id="btn_conner">这是一个圆角的按钮</div>
<div id="btn_box_shodown">给他方框添加阴影</div>
<div id="image_pass"></div>

<p>这是一个可以自动换行的p标签</p>
<h4 id="test_break">这是一个尝试自动换行的标签h4</h4>

</body>
</html>